<template>
    <div class="card_border">
         <van-field left-icon="contact"  clearable label="用户名"  class="input_class" v-model="userName" placeholder="请输入用户名" />
         <van-field left-icon="edit" type="password"  clearable label="密码"  class="input_class" v-model="password" placeholder="请输入密码" />
         <van-button class="input_class btnclass" @click="doLogin" type="default">登陆游戏</van-button>
    </div>
</template>

<script>
import lockr from 'lockr'
import config from '@/config'
export default {
    data:function(){
        return {
            userName:'',
            password:''
        }
    },
    methods:{
        doLogin(){
            this.$http.post(config.SetTokenUrl,{
                UserName:this.userName,
                pwd:this.password
            }).then(res=>{
                
                if (res.data.Success==true) {
                    this.$toast.success("登陆成功！")
                    // this.$store.state.Token=res.data.Token
                    this.$store.commit('setToken',res.data.Token)
                    // console.log("ok")
                    // this.$store.state.UserName=this.userName
                    this.$store.commit('setUserName',this.userName)
                    this.$router.push("/menu")
                }
                else
                {
                    this.$toast.fail("登陆失败！请检查用户名密码是否正确！")
                }
            }).catch(err=>{
                this.$toast.fail("网络异常，请稍后再试！")
            })
        }
    }
}
</script>

<style scoped>
.card_border{
    /* border: 1px solid red; */
    display: flex;
    flex-direction: column;
}
.input_class{
    /* filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5; */
    background-color: unset;
    color: white;
    width: 90%;
    margin: 0 auto;
    flex: 1;
    /* border: 1px solid pink; */
}
.btnclass{
    margin: 30px auto;
    width: 90%;
}
</style>
